<template>
  <div style="padding: 20px; margin-left: 15px;">
    <!-- <h1>管理员管理</h1> -->
    <!-- 头部分 -->
    <div class="top">
      <el-form :model="objs">
        <el-form-item>
          <el-input v-model="objs.idorname" clearable placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="serach">查询</el-button>
          <el-button type="success" size="small" @click="$router.push('/add-conservator')">添加</el-button>
          <el-button type="danger" size="small" @click="delAllData">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <div class="table">
      <TableList :tableHeader="tableHeader" :tableData="tableData" @changeSwitch="changeSwitch"
        @particulars="particulars" @updata="updata" @delete="del" @delAll="delAll">
      </TableList>
    </div>
    <!-- 分页部分 -->
    <div class="paging">
      <PagingList :totalNum="totalNum" @changePageSize="changePageSize" @changePage="changePage"></PagingList>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

import TableList from '../../components/common/table.vue'
import { tableHeader } from '../../types/privilege/Conservator'
import PagingList from '../../components/common/paging.vue'
import http from '../../api/privilege/admin'
import { ElMessage, ElMessageBox } from 'element-plus';
import useRouter from '../../router/router'

// const  router=useRouter()
let objs = ref({
  page: '1',
  pageSize: '5',
  idorname: ''
})
// 表格
const tableData: any = ref([])
const totalNum: any = ref()
// 请求接口
const getAdminList = async () => {
  let res: any = await http.AdminList(objs.value)
  console.log(res);
  tableData.value.length = 0
  tableData.value.push(...res.data)
  totalNum.value = res.total
}
getAdminList()
// switch更改
const changeSwitch = async (data: any) => {
  // console.log(data.admin_id,data.is_use)
  let res: any = await http.AdminChangestatus({ admin_id: data.admin_id, is_use: data.is_use == 1 ? true : false })
  if (res.code == '00000') {
    ElMessage({
      type: 'success',
      duration: 1000,
      message: '更改成功'
    })
  } else {
    ElMessage({
      type: 'error',
      duration: 1000,
      message: '更改失败'
    })
  }
}
// 详情
const particulars = (objs: any) => {
  // console.log('我是详情',objs)
  useRouter.push({ path: '/detail-conservator', query: objs })
}
// 修改
const updata = (objs: any) => {
  // console.log('我是修改',objs)
  useRouter.push({ path: '/updata-conservator', query: objs })
}
// 批量删除
let ids: any = ref([])
const delAll = (val: any) => {
  ids.value = val.map((item: any) => item.admin_id)
  console.log(666, ids.value)
}
const delAllData = (val: any) => {
  ElMessageBox.confirm('确定要删除信息吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    let res: any = await http.AdminDel({ admin_id: ids })
    if (res.code == '00000') {
      ElMessage({
        type: 'success',
        duration: 1000,
        message: '删除成功'
      })
      getAdminList()
    } else {
      ElMessage({
        type: 'error',
        duration: 1000,
        message: res.msg
      })
    }
  }).catch(() => {

  })
}
// 删除
const del = (val: any) => {
  ElMessageBox.confirm('确定要删除信息吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    let res: any = await http.AdminDel({ admin_id: val.admin_id })
    if (res.code == '00000') {
      ElMessage({
        type: 'success',
        duration: 1000,
        message: '删除成功'
      })
      getAdminList()
    } else {
      ElMessage({
        type: 'error',
        duration: 1000,
        message: res.msg
      })
    }
  }).catch(() => {

  })
}
//更改每页页数
const changePageSize = (val: any) => {
  // console.log(val)
  objs.value.pageSize = val
  getAdminList()
}
// 更改当前页数
const changePage = (val: any) => {
  // console.log(val)
  objs.value.page = val
  getAdminList()
}
// 查询
const serach = () => {
  getAdminList()
}
</script>

<style lang="scss" scoped>
.top {
  margin-top: 15px;

  .el-form {
    display: flex;

    .el-input {
      width: 210px;
      height: 28px;
      margin-right: 10px;
    }

    .el-button {
      height: 28px;
    }
  }
}

.table {
  ::v-deep .el-table__cell {
    padding: 10px 0px;
  }

  .el-button {
    height: 28px;
    padding: 7px 15px;
  }
}

.paging {
  margin-top: 20px;
  margin-right: 15px;

  .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
  }

  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
}
</style>